<script setup lang="ts">
import type { ProviderList } from './components';
import DefaultType from '~/assets/imgs/default_type.png';
import { GameListLoading } from '~/composables/useGameLoading';
import { SupplieSrelect } from './components';

const props = defineProps<{
  typeCode?: string;
  providerCode?: string;
  providerName?: string;
}>();
const appStore = useAppStore();
const typeCode = toRef(props, 'typeCode');
const bp = useAppBreakpoints();
const see = useBoolean(!bp.ltTabletl);
const checked = ref<ProviderList>([]);
const { data: gameType } = useGameType();
const briefIntroduction = computed(() => ([
  {
    title: $t('z0ZiCtLqod81UJmP8mWg'),
    content: $t('nG1tS6zXPh7Ig5QXa4w2y'),
  },
  {
    content: $t('hBEtKc3tInqwtutmUuWi'),
  },
  {
    content: $t('r4ClCbhgVpQcXl5RnPfy'),
  },
  {
    content: $t('kvqDc6T9nlyyuqPq4NtV4'),
  },
  {
    content: $t('9Lji6pWr8Y0DyXqySmxxU'),
  },
  {
    content: $t('zNuYdbQ8yfmS1hTrfnnJ'),
  },
  {
    content: $t('dktfkvz5IovcYQgkismv'),
  },
  {
    content: $t('hNil7FyvqA6M3OvrNy4R'),
  },
  {
    content: $t('6UoYuRaCHy0uB0ZqXiQ'),
  },
  {
    content: $t('5tw3rFcfwb0PbV32aTbWu'),
  },
  {
    content: $t('g0b8vz5cfzTjR9UzjEey7'),
  },
  {
    content: $t('qiOCgYs45C8qVXa6HNOc'),
  },
]));
const supplier = ref(props.providerCode || '');
const [inviteGameQry] = useFilterInfiniteQuery(apis.apiGameList, {
  type_code: {
    value: typeCode,
    responsive: true,
  },
  provider_code: {
    value: supplier,
    responsive: true,
  },
  page_size: {
    value: bp.ltTabletl ? 15 : 54,
  },
});
const showSupplier = computed(() => ((!!gameType.value?.provider?.[0]?.provider_code && gameType.value?.provider?.[0]?.provider_code !== 'g9') || typeCode.value === 'like' || typeCode.value === 'recent'));
function useGameType() {
  const enabled = computed(() => !!typeCode.value);
  const { data } = useQuery({
    queryKey: [apis.apiGameTypeDetail.id, typeCode],
    queryFn: () => apis.apiGameTypeDetail({ alias: typeCode.value }),
    enabled,
  });

  return {
    data,
  };
}

function onChange({ ...args }) {
  checked.value = args.checked;
  supplier.value = args?.codes.join(',');
}
</script>

<template>
  <div class="page-content-w flex flex-col select-none gap-5">
    <div class="flex-between">
      <div class="flex items-center gap-2">
        <img v-if="gameType?.alias && !['like', 'recent'].includes(gameType?.alias)" :src="!!gameType.alias ? appStore.getCdnResPath('gameTypeIcon', String(gameType.alias)) : DefaultType " class="size-4">
        <i v-if="gameType?.alias && gameType?.alias === 'like'" class="i-local:collection text-sys-text-body" />
        <i v-if="gameType?.alias && gameType?.alias === 'recent'" class="i-local:recently" />
        <span>{{ gameType?.name }}</span>
      </div>
      <div v-if="showSupplier && $route.fullPath.includes('category')" class="flex items-center justify-center text-sys-text-body">
        <SupplieSrelect :alias="typeCode" @change="onChange" />
      </div>
    </div>
    <div v-if="$route.params.providerName" class="base-title">
      {{ $route.params.providerName }}
    </div>
    <div v-if="checked.length > 0">
      <ATag v-for="i in checked" :key="i?.name" class="cursor-pointer px-3 pb-0.5 text-base text-sys-text-body">
        {{ i?.name }}
      </ATag>
    </div>

    <div class="list">
      <div class="infinite grid">
        <TInfiniteQuery class="col-span-full mt-3" :querier="inviteGameQry">
          <template #default="{ item }">
            <TGameCover class="w-full" :detail="item" />
          </template>
          <template #initLoading>
            <GameListLoading />
          </template>
        </TInfiniteQuery>
      </div>
    </div>
    <div v-if="gameType?.provider?.[0]?.provider_code === 'g9'" class="introduce mt-15 bg-sys-layer-b px-5 py-2">
      <div class="item py-5 pb-6" :class="{ close: !see.is }">
        <template v-for="i in briefIntroduction" :key="i">
          <p class="title">
            {{ i?.title }}
          </p>
          <div class="content">
            {{ i.content }}
          </div>
        </template>
        <p class="mt-1 text-sm text-sys-text-body">
          {{ $t('zd2iwiYfbm1ZLayCw5pZ') }}
        </p>
        <div class="show-more cursor-pointer" @click="see.toggle()">
          {{ see.is ? $t('jPkooXrA4714dtnFj4bUz') : $t('mdXrwOTtIgL4qIeuLMyD') }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.infinite {
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 12px;
  @media bp-lt-tabletl {
    grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
  }
}
.more {
  --uno: 'rounded-8px bg-sys-layer-d w-120px flex-center px-42px pt-8px pb-12px text-sys-text-body ';

  box-shadow: 0 -4px 0 0 rgb(0 0 0 / 50%) inset;
}

.introduce {
  .item {
    --uno: ' text-16px relative overflow-hidden';

    &.close {
      height: 300px;
      padding-bottom: 50px;

      &::before {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100px;
        content: '';
        background: linear-gradient(to top, theme('colors.sys.layer.b') 40%, transparent);
      }
    }

    .title {
      --uno: 'text-4 text-sys-text mb-12px font-semibold';
    }

    .content {
      --uno: 'text-left text-sys-text-body relative overflow-hidden text-sm';
    }

    .show-more {
      --uno: 'text-left text-#EAB308 font-semibold absolute bottom-0px z-2';
    }
  }
}
</style>
